<template>
  <div>
    <el-alert
      v-if="adminLevel < levelRequirementView"
      title="(⊙o⊙)…您的权限不能访问此页面"
      type="warning"
      :closable="false"
    ></el-alert>
    <el-table
      v-else
      :data="verifyData.request"
      style="width: 100%"
    >
      <el-table-column
        type="expand"
        v-if="viewSize.width <= viewSize.threshold"
      >
        <template slot-scope="props">
          <el-form label-position="left">
            <el-form-item label="项目：">
              <span>{{ props.row.itemTitle }}</span>
            </el-form-item>
            <el-form-item label="原值：">
              <span>{{ verifyData.discard[props.$index] }}</span>
            </el-form-item>
            <el-form-item label="新值：">
              <span>{{ props.row.itemValue }}</span>
            </el-form-item>
            <el-form-item label="操作：">
              <buttonConfirm
                :levelRequired="levelRequirementEdit"
                :index="props.$index"
                @yes="approval"
                @no="refusal"
              ></buttonConfirm>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        prop="clientName"
        label="OA名"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="itemTitle"
        label="项目"
      > </el-table-column>
      <el-table-column
        label="原值"
        v-if="viewSize.width > viewSize.threshold"
      >
        <template slot-scope="scope">
          {{ verifyData.discard[scope.$index] }}
        </template>
      </el-table-column>
      <el-table-column
        prop="itemValue"
        label="新值"
        v-if="viewSize.width > viewSize.threshold"
      >
      </el-table-column>
      <el-table-column
        label="提交时间"
        width="100"
      >
        <template slot-scope="scope">
          {{ FUNC.getShortTimeString(scope.row.timeStamp) }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="150"
        v-if="viewSize.width > viewSize.threshold"
      >
        <template slot-scope="scope">
          <buttonConfirm
            :levelRequired="levelRequirementEdit"
            :index="scope.$index"
            @yes="approval"
            @no="refusal"
          ></buttonConfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import buttonConfirm from "./buttonConfirm.vue";
  export default {
    name: "verifyViewContent",
    components: {
      buttonConfirm,
    },
    data() {
      return {
        levelRequirementEdit: 2,
        levelRequirementView: 1,
      };
    },
    computed: {
      adminLevel() {
        return this.$store.getters.adminLevel;
      },
      loaded() {
        return (
          this.$store.state.verifyData != null &&
          this.$store.state.verifyData.status == "success"
        );
      },
      verifyData() {
        if (!this.loaded) return [];
        return this.$store.state.verifyData;
      },
      empty() {
        if (!this.loaded) return true;
        if (!this.verifyData.request) return true;
        if (this.verifyData.request.length == 0) return true;
        return false;
      },
      viewSize() {
        return this.$store.state.viewSize;
      },
    },
    methods: {
      load() {
        this.$store.dispatch("loadVerifyData");
      },
      approval(data) {
        this.$store.dispatch("operateVerify", { yes: true, data: data }).then(() => {
          this.$message.success('已同意' + this.verifyData.request[data.index].clientName + '修改' + this.verifyData.request[data.index].itemTitle + '的申请');
        }).catch((e) => {
          this.$message.error('出错了！' + JSON.stringify(e));
        });
      },
      refusal(data) {
        this.$store.dispatch("operateVerify", { yes: false, data: data }).then(() => {
          this.$message.warning('已拒绝' + this.verifyData.request[data.index].clientName + '修改' + this.verifyData.request[data.index].itemTitle + '的申请');
        }).catch((e) => {
          this.$message.error('出错了！' + JSON.stringify(e));
        });
      },
    },
    mounted() {
      //if (!this.loaded) this.load();
      this.$store.dispatch("loadVerifyData");
    },
  };
</script>

<style scoped>
  thead {
    font-weight: bold;
  }
</style>